<template>

	<view class="vip-container">
		<!-- 顶部标题区域 -->
		<view class="header" :style="{ 'paddingTop': statusBarHeight + 'px' }">
			<text class="title">{{ getVipInfo().isVip ? '续费' : '开通' }}会员</text>
			<text class="subtitle">开通会员后，您的每一单收入，平台将不再抽取提成</text>
		</view>

		<!-- 套餐选项 -->
		<view class="plans">
			<view class="plan-item" :class="{active: selectedPlan === 'month'}" @click="selectPlan('month')">
				<view class="plan-top">
					<text class="plan-name">月度会员</text>
					<view class="price-group">
						<text class="current-price">￥{{ formatAmount(planPrices.month) }}</text>
						<text class="original-price">¥300</text>
					</view>
					<view class="tag">
						<uni-icons custom-prefix="iconfont" type="icon-VIP" size="28" color="#ecc039"></uni-icons>
					</view>
				</view>
			</view>

			<view class="plan-item" :class="{active: selectedPlan === 'year'}" @click="selectPlan('year')">
				<view class="plan-top">
					<text class="plan-name">年度会员</text>
					<view class="price-group">
						<text class="current-price">￥{{ formatAmount(planPrices.year) }}</text>
						<text class="original-price">¥3000</text>
					</view>
					<view class="tag">
						<uni-icons custom-prefix="iconfont" type="icon-VIP" size="28" color="#ec2727"></uni-icons>
					</view>
				</view>
			</view>

		</view>
		
		<!-- 提示 -->
		<view class="countdown" >
			<text>
				{{ getVipInfo().info }}
			</text>
			<text class="time" v-if="getVipInfo().isVip">
				{{ getVipInfo().vipExpireTime }}
			</text>
		</view>

		<!-- 支付方式 -->
		<view class="recharge-mode">
			<view class="left">
				充值方式
			</view>
			<view class="right">
				<text>支付宝</text>
				<uni-icons type="right"></uni-icons>
			</view>
		</view>

		<!-- 开通按钮 -->
		<view class="open-btn primary-btn" @click="doOpen">
			<text class="btn-text">￥{{ selectedPlanPrice }} 立即开通</text>
		</view>

		<!-- 品牌信息 -->
		<view class="brand-info">
			<text>@ 钱途代驾接单 VIP</text>
		</view>
		
	</view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { getVipInfo } from '@/utils/commonUtil.js'
import { useUserStore } from '@/stores/userStore.js'
import { getVipPrice } from '@/api/recharge.js'
import { formatAmount } from '@/utils/amountUtil.js'
import { recharge } from '@/api/recharge.js'
import { rechargeTypeEnum } from '@/utils/enums.js'

/** 状态栏高度 */
const statusBarHeight = uni.getSystemInfoSync().statusBarHeight

const driver = useUserStore()

// 选中的套餐
const selectedPlan = ref('month')

// 套餐价格映射
const planPrices = ref({
	month: 0,
	year: 0
})

// 计算选中的套餐价格
const selectedPlanPrice = computed(() => {
	return planPrices[selectedPlan.value]
})

// 选择套餐
const selectPlan = (plan) => {
	selectedPlan.value = plan
}

// 开通会员
function doOpen () {
	// #ifndef APP-PLUS
	uni.showToast({
		title: '浏览器不支持充值，请下载APP使用完整功能',
		icon: 'none'
	})
	return
	// #endif
	
	recharge({
		amount: 10000, // 这个值传过去并没有用，而是避免参数校验报错
		payChannel: 1,
		rechargeType: selectedPlan.value === 'month' ? rechargeTypeEnum.MONTH.value : rechargeTypeEnum.YEAR.value
	}).then(res => {
		uni.requestPayment({
			provider: 'alipay',
			orderInfo: res.data,
			success: (res) => {
				setTimeout(() => {
					driver.refreshCurrentDriver()
				}, 200)
				uni.showToast({
					icon: 'none',
					title: '支付成功',
					success: () => {
						uni.navigateBack()
					}
				})
			},
			fail: (err) => {
				uni.showToast({
					icon: 'none',
					title: '支付失败'
				})
			}
		})
	})
}

onMounted(() => {
	driver.refreshCurrentDriver()
	getVipPrice().then(res => {
		planPrices.value = res.data
	})
})
</script>

<style lang="scss" scoped>
* {
	box-sizing: border-box;
}	
	
.vip-container {
	padding: 30rpx;
	background: linear-gradient(to bottom, #f9f9f9, #fff);
	min-height: 100vh;
}

.header {
	text-align: center;
	margin-bottom: 40rpx;

	.title {
		display: block;
		font-size: 48rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 16rpx;
	}

	.subtitle {
		font-size: 26rpx;
		color: #666;
	}
}

.plans {
	margin-bottom: 30rpx;
}

.plan-item {
	background: #fff;
	border-radius: 16rpx;
	padding: 30rpx;
	margin-bottom: 20rpx;
	border: 2rpx solid #e0e0e0;
	transition: all 0.3s;

	&.active {
		border-color: $uni-color-primary;
		background-color: rgba($uni-color-primary, 0.06);
	}

	.plan-top {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.plan-name {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.price-group {
		text-align: right;
	}

	.current-price {
		display: block;
		font-size: 36rpx;
		font-weight: bold;
		color: $uni-color-primary;
	}

	.original-price {
		display: block;
		font-size: 24rpx;
		color: #999;
		text-decoration: line-through;
		margin-top: 8rpx;
	}

	.tag {
		// background: rgba($uni-color-primary, 0.1);
		// color: $uni-color-primary;
		// padding: 8rpx 16rpx;
		// border-radius: 20rpx;
		// font-size: 22rpx;
	}

	.plan-desc {
		font-size: 24rpx;
		color: #999;
		margin-top: 10rpx;
	}
}

.recharge-mode {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 30rpx 0;
	border-bottom: 1rpx solid #ddd;
	border-top: 1rpx solid #ddd;
	.left {
		
	}
	.right {
		display: flex;
		align-items: center;
	}
}

.countdown {
	text-align: center;
	font-size: 26rpx;
	color: #666;
	margin: 40rpx 0;
  
	.time {
		color: $uni-color-primary;
		font-weight: bold;
	}
}

.open-btn {
	text-align: center;
	padding: 28rpx;
	border-radius: 50rpx;
	margin: 30rpx 0;

	.btn-text {
		font-size: 32rpx;
		font-weight: bold;
	}
}

.brand-info {
	text-align: center;
	font-size: 24rpx;
	color: #999;
	margin-bottom: 40rpx;
}
</style>